<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>File Blob Upload</title>
  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
    }

    .filePicker {
      width: 160px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      color: #fff;
      background: #00b7ee;
    }

    .filePicker input[type="file"] {
      position: relative;
      top: -44px;
      left: 0px;
      width: 160px;
      height: 44px;
      opacity: 0;
      cursor: pointer;
      overflow: hidden;
      z-index: 0;
    }

    .filePicker label {
      display: block;
      width: 100%;
      height: 100%;
    }

    .container {
      width: 160px;
      margin: 30px auto;
    }

    #preview .obj {
      max-width: 300px;
    }
  </style>
</head>
<body>

<div class="container">
  <input type="file" name="" id="" value=""/>
</div>
<div class="container">
  <div class="filePicker">
    <label for="点击选择文件"></label>
    <input id="fileInput" type="file" name="file" accept="image/*" multiple="multiple"/>
  </div>
</div>

<h2>preview here...</h2>
<div id="preview"></div>



<script>
  var fileInput = document.getElementById('fileInput')
  fileInput.addEventListener('change',(e) => {
    var file = fileInput.files[0]
    console.log('upload file: ', file)

    previewUpload(file)
  })

  function previewUpload(file) {
    var preview = document.getElementById("preview")
    var img = document.createElement('img')
    img.classList.add('obj')
    img.file = file
    preview.appendChild(img)

    var reader = new FileReader()
    reader.onload = (aImg => {
      return e => aImg.src = e.target.result
    })(img)

    reader.readAsDataURL(file)
  }

  /**
   * 读文件大小
   * @param {Object} file
   */
  function readFileSize(file){
    var size = file.size / 1024;
    var aMultiples = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

    var fileSizeString = '';
    for(var i = 0; size > 1; size /= 1024, i++) {
      fileSizeString = size.toFixed(2) + " " + aMultiples[i];
    }
    return fileSizeString;
  }

</script>

</body>
</html>
